{% extends "base.html" %}

{% set current_menu = 'lead' %}
{% set current_page = 'lead_detail' %}

{% block title %}线索管理 - 线索详情{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.home') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary">
                    <i class="fas fa-home mr-2"></i>
                    首页
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_list') }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索管理</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">线索详情</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- 页面标题和操作按钮 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-900">线索管理详情</h1>
        <div class="flex space-x-2">
            <a href="{{ url_for('lead.lead_edit', lead_id=lead.id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-edit mr-2"></i>
                编辑
            </a>
            {% if not lead.converted_to_customer_id %}
            <a href="{{ url_for('lead.lead_convert', lead_id=lead.id) }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700">
                <i class="fas fa-exchange-alt mr-2"></i>
                转化为客户
            </a>
            {% endif %}
            <a href="{{ url_for('lead.create_lead') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-plus mr-2"></i>
                新建线索
            </a>
            <button class="delete-lead inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700" data-id="{{ lead.id }}" data-name="{{ lead.name }}">
                <i class="fas fa-trash-alt mr-2"></i>
                删除
            </button>
        </div>
    </div>

    <!-- 线索基本信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">基本信息</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索名称</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.name }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索编号</h4>
                    <p class="mt-1 text-sm text-gray-900">LEAD-{{ lead.id }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">公司名称</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.company or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索来源</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.source or '未知' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索状态</h4>
                    <p class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if lead.status == '新线索' %}bg-green-100 text-green-800
                            {% elif lead.status == '跟进中' %}bg-blue-100 text-blue-800
                            {% elif lead.status == '已转化' %}bg-purple-100 text-purple-800
                            {% elif lead.status == '已关闭' %}bg-gray-100 text-gray-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ lead.status }}
                        </span>
                    </p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">优先级</h4>
                    <p class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if lead.priority == '高' %}bg-red-100 text-red-800
                            {% elif lead.priority == '中' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-green-100 text-green-800{% endif %}">
                            {{ lead.priority }}
                        </span>
                    </p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">负责人</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.assigned_user.name if lead.assigned_user else '未分配' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">创建时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.created_at | format_time }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">更新时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.updated_at | format_time }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">预算</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.budget or '未填写' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">分配时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.assigned_at | format_time if lead.assigned_at else '未分配' }}</p>
                </div>
            </div>
            
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500">备注</h4>
                <p class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ lead.remarks or '无' }}</p>
            </div>
        </div>
    </div>

    <!-- 联系信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">联系信息</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500">联系人</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.name or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">职位</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.position or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">电话</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.phone or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">邮箱</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.email or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">行业</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.industry or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">创建人</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.creator.name if lead.creator else '无' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 需求信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">需求信息</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索评分</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.score or '0' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">首次触达时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.first_contact_at | format_time if lead.first_contact_at else '未触达' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">转化时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.converted_at | format_time if lead.converted_at else '未转化' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">转化客户</h4>
                    <p class="mt-1 text-sm text-gray-900">
                        {% if lead.converted_to_customer_id %}
                        <a href="{{ url_for('customer.customer_detail', customer_id=lead.converted_to_customer_id) }}" class="text-primary hover:text-blue-600">
                            {{ lead.converted_to_customer.name }}
                        </a>
                        {% else %}
                        未转化
                        {% endif %}
                    </p>
                </div>
                <!-- 新增转化信息字段 -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500">预估金额</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.estimated_amount or '未填写' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">预估成交日期</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.estimated_close_date | format_time if lead.estimated_close_date else '未填写' }}</p>
                </div>
            </div>
            
            <!-- 转化原因 -->
            {% if lead.conversion_reason %}
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500">转化原因</h4>
                <p class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ lead.conversion_reason }}</p>
            </div>
            {% endif %}
            
            <!-- 转化备注 -->
            {% if lead.conversion_notes %}
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500">转化备注</h4>
                <p class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ lead.conversion_notes }}</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 跟进记录 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900">跟进记录</h3>
            <a href="{{ url_for('lead.lead_followup_create', lead_id=lead.id) }}" class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700">
                <i class="fas fa-plus mr-1"></i>
                添加跟进
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进方式
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进内容
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            下次跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for followup in followups %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.created_at | format_time }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.method }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.manager.name if followup.manager else '未知' }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            {{ followup.content }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.next_followup_time | format_time if followup.next_followup_time else '无' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('lead.lead_followup_edit', followup_id=followup.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button class="delete-followup text-red-600 hover:text-red-900" data-id="{{ followup.id }}">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无跟进记录
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 操作记录 -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">操作记录</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作类型
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作内容
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for log in logs %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.created_at | format_time }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.operator.name if log.operator else '未知' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.operation_type }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            {{ log.operation_content }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无操作记录
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

<!-- 删除线索确认模态框 -->
<div id="delete-lead-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除销售线索</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除销售线索 "<span id="delete-lead-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-lead-form" method="post">
                    <input type="hidden" id="delete-lead-id" name="lead_id">
                    <button type="button" id="cancel-delete-lead" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除跟进记录确认模态框 -->
<div id="delete-followup-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除跟进记录</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除这条跟进记录吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-followup-form" method="post">
                    <input type="hidden" id="delete-followup-id" name="followup_id">
                    <button type="button" id="cancel-delete-followup" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 删除线索确认模态框
        const deleteLeadModal = document.getElementById('delete-lead-modal');
        const deleteLeadName = document.getElementById('delete-lead-name');
        const deleteLeadId = document.getElementById('delete-lead-id');
        const deleteLeadForm = document.getElementById('delete-lead-form');
        const cancelDeleteLead = document.getElementById('cancel-delete-lead');
        
        document.querySelectorAll('.delete-lead').forEach(button => {
            button.addEventListener('click', function() {
                const leadId = this.getAttribute('data-id');
                const leadName = this.getAttribute('data-name');
                
                deleteLeadId.value = leadId;
                deleteLeadName.textContent = leadName;
                
                // 设置表单提交URL
                deleteLeadForm.action = `/leads/${leadId}/delete`;
                
                deleteLeadModal.classList.remove('hidden');
            });
        });
        
        cancelDeleteLead.addEventListener('click', function() {
            deleteLeadModal.classList.add('hidden');
        });
        
        // 删除跟进记录确认模态框
        const deleteFollowupModal = document.getElementById('delete-followup-modal');
        const deleteFollowupId = document.getElementById('delete-followup-id');
        const deleteFollowupForm = document.getElementById('delete-followup-form');
        const cancelDeleteFollowup = document.getElementById('cancel-delete-followup');
        
        document.querySelectorAll('.delete-followup').forEach(button => {
            button.addEventListener('click', function() {
                const followupId = this.getAttribute('data-id');
                
                deleteFollowupId.value = followupId;
                
                // 设置表单提交URL
                deleteFollowupForm.action = `/lead_followups/${followupId}/delete`;
                
                deleteFollowupModal.classList.remove('hidden');
            });
        });
        
        cancelDeleteFollowup.addEventListener('click', function() {
            deleteFollowupModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        [deleteLeadModal, deleteFollowupModal].forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });
        });
    });
</script>
{% endblock extra_js %}